<template>
	<view class="content">
		<TopLogo></TopLogo>
		<view class="form-content-wrap">
			<view class="content-box">
				<view class="form-content">
					<block>
						<view class="form-title">手机号</view>
						<view class="pr phone" style="display: flex; justify-content: flex-start; padding-left: 30rpx;">
							<select v-model="areaCode" class="form-select">
								<option value='86'>+86</option>
								<option value='852'>+852</option>
							</select>
							<input type="number" maxlength="11" name="accounts" class="form-item"
								@input="form_input_mobile_event" />
						</view>
						<view class="form-title">验证码</view>
						<view class="code pr m-b-xl">
							<input type="number" name="verify" maxlength="4" @input="form_input_mobile_code_event" />
							<button
								:class="'verify-submit pa br text-size-sm ' + (verify_disabled ? 'sub-disabled' : '')"
								type="default" hover-class="none" size="mini" :disabled="verify_disabled"
								@tap="verify_send_event">{{ verify_submit_text }}</button>
						</view>
						<view class="submit-box">
							<img src="../../static/login-btn.png" class="submit-login" @tap="handleLogin"></img>
						</view>
					</block>
					<!-- <img src="../../static/tv.png" class="tv-icon"></img>
					<img src="../../static/good-house.png" class="good-house-icon"></img> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopLogo from '@/components/topLogo/index.vue';
	export default {
		components: {
			TopLogo
		},
		data() {
			return {
				verify_submit_text: '获取验证码',
				verify_disabled: false,
				form_input_mobile_value: '',
				form_input_mobile_code: '',
				verify_time_total: 60,
				areaCode: '86',
			}
		},
		onLoad() {

		},
		methods: {
			// 输入手机号码事件
			form_input_mobile_event(e) {
				this.form_input_mobile_value = e.detail.value
			},
			// 输入验证码
			form_input_mobile_code_event(e) {
				this.form_input_mobile_code = e.detail.value
			},
			// 短信验证码发送事件
			verify_send_event() {
				if ((this.form_input_mobile_value || null) == null) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'error'
					})
					return false;
				}
				this.verify_send_handle()
			},
			// 短信验证码发送处理
			verify_send_handle() {
				// 网络请求
				var self = this;
				uni.showLoading({
					title: '请求中',
				});
				this.verify_disabled = true
				uni.request({
					url: 'https://dy.btvs.cn/api/basic/sms/sendSms',
					method: 'POST',
					data: {
						phoneNumber: this.form_input_mobile_value,
						areaCode: this.areaCode
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							// 倒计时处理
							var temp_time = this.verify_time_total;
							this.temp_clear_time = setInterval(function() {
								if (temp_time <= 1) {
									clearInterval(self.temp_clear_time);
									self.verify_submit_text = '获取验证码'
									self.verify_disabled = false
								} else {
									temp_time--;
									self.verify_submit_text = '剩余' + temp_time + '秒'
								}
							}, 1000);
						} else {
							this.verify_submit_text = '获取验证码'
							this.verify_disabled = false
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							});
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.verify_submit_text = '获取验证码'
						this.verify_disabled = false
						uni.showToast({
							title: res.msg || '网络开小差了哦',
							icon: 'error'
						});
					},
				});
			},
			handleLogin() {
				// 网络请求
				uni.showLoading({
					title: '请求中',
				});
				if ((this.form_input_mobile_value || null) == null) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'error'
					})
					return false;
				}
				if (this.form_input_mobile_code == '') {
					uni.showToast({
						title: '请输入正确的验证码',
						icon: 'error'
					})
					return false;
				}
				uni.request({
					url: 'https://dy.btvs.cn/api/auth/guestLogin',
					method: 'POST',
					data: {
						phoneNumber: this.form_input_mobile_value,
						code: this.form_input_mobile_code
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							uni.setStorageSync('token', res.data.data.access_token);
							uni.navigateTo({
								url: '/pages/qd/qd'
							})

						}else if (res.data.code == 5006) {
							uni.navigateTo({
								url: '/pages/noRegister/index'
							})
						} else if (res.data.code == 5001 || res.data.code == 5002|| res.data.code == 5004) {
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							})
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络开小差了哦',
							icon: "error"
						})
					},
				});
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		background: url('../../static/form_bg3.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

		.form-content-wrap {
			width: 100%;
			height: 100%;
			// background: url('../../static/form_bg.png');
			// background-size: 85% auto;
			// background-repeat: no-repeat;
			// background-position: center;

			
			
			.content-box{
				width: 100%;
				height: 100%;
				// background: url('../../static/wl_bg.png');
				// background-size: 100% 100%;
				// background-repeat: no-repeat;
				// background-position: center;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
			}

			.form-title {
				margin-top: 16px;
				margin-bottom: 8px;
				padding-left: 34rpx;
				font-size: 14px;
				font-weight: 600;
				text-align: left;
				color: #e4aa84;
			}

			.form-content {
				width: 80%;
				padding: 160rpx 80rpx 80rpx 80rpx; 
				margin: 0 auto;
				position: relative;

				.good-house-icon {
					position: absolute;
					width: 260rpx;
					right: -80rpx;
					bottom: -100rpx;
				}

				.tv-icon {
					position: absolute;
					width: 200rpx;
					left: -70rpx;
					bottom: -80rpx;
				}
			}

			.form-content .form-item,
			.form-content .code,
			.form-content .verify {
				height: 50px;
				line-height: 50px;
				border: 0;
				// background-image: url('/static/input_bg.png');
				// background-size: 100% 100%;
			}



			.form-content .code input,
			.form-content .verify input {
				height: 50px;
				line-height: 50px;
				padding: 0 36rpx;

			}



			.form-content .form-item ::v-deep .input-placeholder,
			.form-content .form-item ::v-deep .uni-input-input {
				padding: 0 36rpx;
				font-size: 30rpx;
				text-align: left;
			}

			.form-content .form-item ::v-deep .input-placeholder,
			.form-content .code input ::v-deep .input-placeholder,
			.form-content .verify input ::v-deep .input-placeholder {
				font-size: 30rpx;
			}

			.form-content .code input,
			.form-content .verify input {
				width: 63%;
				text-align: left;
			}



			.form-content .code .verify-submit {
				padding: 0;
				height: 28px;
				line-height: 28px;
				top: 11px;
				right: 36rpx;
				background-color: transparent;
				color: #e4aa84;
			}

			.form-content .verify-submit:after {
				border: none;
				background-color: transparent;
			}

			.submit-box {
				margin-top: 160rpx;
				text-align: center;

				.submit-login {
					width: 240rpx;
					margin: 0 auto;
				}
			}
			.code,.phone{
				border-radius: 0 !important;
				background-image: url('/static/input_bg.png');
				background-size: 100% 100%;
			}

		}
		.form-select {
			height: 50px;
			line-height: 50px;
			padding: 0;
			border: none;
			background: transparent;
			color: #111;
			font-size: 30rpx;
			margin-right: 10rpx;
		}

		.m-b-xl {
			margin-bottom: 18px;
		}

		.pa {
			position: absolute;
		}

		.pr {
			position: relative;
		}

		.br {
			border: none !important;
		}

		.cr-grey,
		.cr-grey-9 {
			color: #999 !important;
		}

		.text-size-sm {
			font-size: 13px !important;
		}

		.form-content .diy ::v-deep .uni-input-input {
			padding-left: 0 !important;
		}
	}
</style>